<template>
  <!-- 地图右下角功能按钮 -->
  <div class="right-bottom-btn">
    <div class="btn btn1" @click="scale('BIG')">
      <i class="el-icon-plus" />
    </div>
    <div class="btn btn2" @click="scale('SMALL')">
      <i class="el-icon-minus" />
    </div>
  </div>
</template>

<script>
// import 《组件名称》 from '《组件路径》';

export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    scale(type) {
      this.$emit('scale', type)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.right-bottom-btn {
  position: absolute;
  bottom: 5vh;
  right: 1.6vw;
  width: 2vw;
  height: 4vw;
  z-index: 101;
  .btn {
    background: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid gray;
    height: 2vw;
    cursor: pointer;
  }
  .btn1 {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: none;
  }
  .btn2 {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
</style>
